<template>
  <div class="home-right">
    <!-- 地图操作台 -->
    <div class="right-child-left">
      <!-- 大地图 -->
      <div class="home-main-right-map">
        <img src="../assets/img/allmap.png" alt="" />
        <!-- 船体位置 -->
        <div class="right-allmap-location">
          <img src="../assets/img/ship.png" alt="" />
        </div>
        <!-- 警告显示 -->
        <div class="right-allmap-warning">
          <img src="../assets/img/wring.svg" alt="" />
        </div>

        <!-- 经纬 -->
        <div class="right-jinwei">
          <div class="jinwei-localtion">
            <h6>本船位置：</h6>
            <p>
              029°33′59.126″N<br />
              106°35′20.908″E<br />
            </p>
          </div>
          <div class="jinwei-fx" v-if="displayNone">
            <h6>方向</h6>
            <div class="jinwei-fx-infor">
              <div>
                <p>HDT</p>
                <p>346.983°</p>
              </div>
              <div>
                <p>COG</p>
                <p>347.093°</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 雷达信息 -->
        <div class="right-allmap-radar" v-if="displayNone">
          <h4>雷达</h4>
          <ul>
            <li>
              <span class="right-rader-zy">型号</span
              ><span>{{ rader.xh }}</span>
            </li>
            <li>
              <span class="right-rader-zy">量程</span
              ><span>{{ rader.lc }}</span>
            </li>
            <li v-for="(raders, index) in rader.values" :key="index">
              <span class="right-rader-zy">{{ raders.zy }}</span>
              <el-slider v-model="raders.zys"></el-slider>
              {{ raders.zys }}
            </li>
          </ul>
        </div>

        <!-- 航速设置 -->
        <div class="right-current-site">
          <p>
            最大限速<br />
            <span>90km/h</span>
          </p>
        </div>

        <!-- 当前站点 -->
        <div class="right-current-sites">
          <p><span>当前站点：</span>{{ site.sites }}</p>
          <p><span>出发时间：</span>{{ site.timing }}</p>
          <p><span>到达时间：</span>{{ site.timed }}</p>
        </div>

        <!-- 货物信息 -->
        <div class="right-current-cargo" v-if="shipment == 'cargo'">
          <h5>欢迎使用XXX货运</h5>
          <span>请勿携带：</span>
          <p>易燃易爆物品、管制刀具、宠物</p>
        </div>
      </div>

      <!-- 操作台 -->
      <div class="right-workStation">
        <!-- 油量信息显示 -->
        <div class="rigth-workSta-gasolines">
          <!-- 冷却剂、油压 -->
          <div class="rigth-workSta-gasolines-transverse">
            <h6>冷却剂</h6>
            <traDiv state="20%" unit="°C" temperature="20"></traDiv>
          </div>
          <div class="rigth-workSta-gasolines-transverse" v-if="false">
            <h6>压力</h6>
            <traDiv state="0%" unit="kPa" temperature="0"></traDiv>
          </div>
          <!-- 电量油量显示 -->
          <div class="rigth-workSta-gasolines-gasoline">
            <!-- 新风格电量 -->
            <div class="rightChild-gasolines">
              <div class="rightChild-gasolines-xin" style="width:100%;"></div>
              <div class="rightChild-gasolines-xin" style="width:80%;">
                <div></div>
              </div>
              <div class="rightChild-gasolines-xin" style="width:60%;">
                <div></div>
              </div>
              <div class="rightChild-gasolines-xin" style="width:40%;">
                <div></div>
              </div>
              <div class="rightChild-gasolines-xin" style="width:20%;">
                <div></div>
              </div>
              <div class="rightChild-gasolines-xin" style="width:10%;">
                <div></div>
              </div>
              <div class="rightChild-gasolines-number">
                89%
                <p>电量</p>
              </div>
            </div>

            <!-- 油量 -->
            <!-- <div class="rightChild-gasoline">
              <el-progress
                type="dashboard"
                :percentage="10"
                :color="colors"
                :stroke-width="2"
                :width="70"
              ></el-progress>
              <h6>油量</h6>
            </div> -->
            <!-- 新风格油量 -->
            <div class="rightChild-gasolines">
              <div class="rightChild-gasolines-xin" style="width:100%;"></div>
              <div class="rightChild-gasolines-xin" style="width:80%;">
                <div></div>
              </div>
              <div class="rightChild-gasolines-xin" style="width:60%;">
                <div></div>
              </div>
              <div class="rightChild-gasolines-xin" style="width:40%;">
                <div></div>
              </div>
              <div class="rightChild-gasolines-xin" style="width:20%;">
                <div></div>
              </div>
              <div class="rightChild-gasolines-xin" style="width:10%;">
                <div></div>
              </div>
              <div class="rightChild-gasolines-number">
                89%
                <p>油量</p>
              </div>
            </div>
            <!-- 油量 -->
            <!-- <div class="rightChild-gasoline" v-if=false>
              <el-progress
                type="dashboard"
                :percentage="20"
                :color="colors"
                :stroke-width="2"
                :width="70"
              ></el-progress>
              <h6>电量</h6>
            </div> -->
          </div>
        </div>

        <!-- 信息显示 -->
        <div class="right-works-infor">
          <div class="right-infor-sucss">
            <li>
              <p><span>停泊码头：</span>朝天门站</p>
              <p><span>停泊位置：</span>{{ success.stop }}</p>
              <p><span>系泊状态：</span>{{ success.xi }}</p>
              <p v-if="shipment == 'people'"><span>乘客上下船：</span>{{ success.text }}</p>
              <p v-if="shipment == 'cargo'"><span>货物情况：</span>{{ success.reject }}</p>

            </li>
          </div>
        </div>

        <!-- 仪表盘 -->
        <div class="dashboard">
          <img src="../assets/img/dashboard.png" alt="" />
          <p class="right-dash-speed">航速：<span>0km/h</span></p>
          <div class="right-dash-moterspeed" v-if="displayNone">
            <div>
              <h6>左电机转速：</h6>
              <p>1136</p>
            </div>
            <div>
              <h6>右电机转速：</h6>
              <p>1136</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右边操作信息显示 -->
    <div class="rigth-operation-infor">
      <!-- 视频显示 -->
      <div class="right-video">
        <img src="../assets/img/hl.png" alt="" />
        <!-- 时间显示 -->
        <p>{{ getTiem }}</p>
        <div class="right-video-operation">
          <ul>
            <li v-for="(videoss, index) in videos" :key="index">
              <img :src="videoss.src" alt="" />
            </li>
          </ul>
        </div>
      </div>

      <!-- 信息与小地图与雷达 -->
      <div class="right-operation-infor-mapandinfor">
        <!-- 地图雷达 -->
        <div class="right-operation-infor-map">
          <!-- 小地图 -->
          <div class="right-map">
            <img src="../assets/img/allmap.png" alt="" />
            <div class="right-samllmap-localtion">
              <i class="el-icon-location-outline"></i>
            </div>
          </div>
          <!-- 雷达 -->
          <div class="right-radar">
            <div class="right-rader-pgroup">
              <p><span>巨大障碍物</span> <i class="el-icon-warning"></i></p>
              <p><span>左偏南30°C</span></p>
              <p>距离<span>200M</span></p>
              <p>请注意避让</p>
            </div>
            <div class="right-rader-pgroup" v-if="false">
              <p
                style="fontSize:18px;fontWeight:600;color:#67C23A;lineHeight:70px;"
              >
                航线正常
              </p>
            </div>
          </div>
        </div>

        <!-- 信息显示1 -->
        <div class="right-user-infomation-one">
          <!-- 速度 -->
          <div class="user-one-speed">
            <div class="user-speed-state">
              <span>待机</span>
            </div>
            <div class="user-speed-speed">
              <p class="user-speed-speed-p-one">
                航速<br />
                <span>0km/h</span>
              </p>
              <p class="user-speed-speed-p" v-if="displayNone">
                最大限速：<span>90km/h</span>
              </p>
            </div>
          </div>
          <!-- 乘客信息 -->
          <div class="user-one-information">
            <p v-if="shipment == 'people'">人数：<span>6人</span></p>
            <p>下一站：<span>江北嘴站</span></p>
            <p>终点站：<span>弹子石站</span></p>
            <p v-if="shipment == 'cargo'">货物最大载重：<span>8T</span></p>
            <p>预计达到时间：<span>15：23</span></p>
          </div>
        </div>
      </div>

      <!-- 信息显示 -->
      <div class="right-user-infomation">
        <!-- 人工越权 -->
        <div class="right-user-infomation-left">
          <div class="right-user-infomation-left-auto">
            <!-- 控制模式 -->
            <div class="right-user-child-model">
              <div>
                <!-- <h6>控制模式：</h6> -->
                <p>控制模式：自动控制</p>
              </div>
              <div v-if="displayNone">
                <h6>控制端</h6>
                <p class="model-color">工控机</p>
              </div>
            </div>
            <div class="right-user-child-stop">
              <div class="right-user-child-stop-sos">
                <button>
                  SOS
                </button>
                <p>紧急报警</p>
              </div>
              <div class="right-user-child-stop-sos">
                <button>
                  120
                </button>
                <p>紧急救援</p>
              </div>
            </div>
          </div>
          <!-- 权限申请 -->
          <div class="right-user-infomation-left-unauto">
            <ul>
              <li v-for="(controls, index) in control" :key="index">
                <img :src="controls.src" alt="" />
                <p>{{ controls.text }}</p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 右边信息操作 -->
        <div class="right-user-infomation-right">
          <ul>
            <li v-for="(operations, index) in operation" :key="index">
              <img :src="operations.src" alt="" />
              <p>{{ operations.text }}</p>
            </li>
          </ul>
          <!-- 紧急停船 -->
          <div class="right-user-infomation-stop">
            <button>
              STOP
            </button>
            <p>紧急停船</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import traDiv from "../components/transverseDiv.vue";
export default {
  name: "right",
  components: {
    traDiv
  },
  data() {
    return {
      // 隐藏不需要元素
      displayNone: false,
      // people 客运界面  //cargo 货运界面
      shipment:'people',
      getTiem: "",
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 }
      ],
      success: {
        stop: "3号位",
        xi: "已系泊",
        text: "客户已下船完毕",
        reject:'货物装填中...'
      },
      rader: {
        xh: "YZ_YR22",
        lc: "2/3 NM",
        values: [
          { zy: "海浪", zys: 55 },
          { zy: "增益", zys: 10 },
          { zy: "雨雪", zys: 50 }
        ]
      },
      control: [
        {
          src: require("../assets/img/qx.png"),
          text: "权限申请"
        },
        {
          src: require("../assets/img/dj.png"),
          text: "待机模式"
        },
        {
          src: require("../assets/img/sd.png"),
          text: "手动控制"
        },
        {
          src: require("../assets/img/ai.png"),
          text: "自动控制"
        }
      ],
      operation: [
        {
          src: require("../assets/img/rw.png"),
          text: "任务管理"
        },
        {
          src: require("../assets/img/sb.png"),
          text: "设备管理"
        },
        {
          src: require("../assets/img/tj.png"),
          text: "添加航点"
        },
        {
          src: require("../assets/img/bj.png"),
          text: "编辑航点"
        }
      ],
      site: {
        sites: "朝天门站",
        mans: 26,
        timed: "15:23",
        timing: "13:56"
      },
      videos: [
        {
          src: require("../assets/img/sx.png")
        },
        {
          src: require("../assets/img/pz.png")
        }
      ]
    };
  },
  // 页面加载显示
  created() {
    setInterval(this.getTime, 100);
  },
  methods: {
    getTime() {
      var time = new Date();
      this.getTiem = time.toLocaleString();
    }
  }
};
</script>

<style lang="less" scoped>
@import url('../assets/css/home.less');
</style>
